<template>
	<view class="vote-view">
		<Navbar title="第三届“月湖杯”3D大赛校赛网络投票" :leftIconColor="'#3b65a5'" />
		<view class="vote-swiper">
			<u-swiper :list="bannerList" height="376rpx" radius="0" :autoplay="false"></u-swiper>
		</view>
		<view v-if="voteData.activityDesc">
			<view class="vote-content">
				<u-parse :content="voteData.activityDesc || ''"></u-parse>
			</view>
			<view class="flex-box-center">
				<image :src="imageUrl + '/vote-down-icon.png'" class="vote-down-icon"></image>
				<!-- <image src="../static/dotu.gif" mode="" class="vote-down-icon"></image> -->
			</view>
		</view>
		<view class="vote-situation-box flex-box-space-between">
			<view class="vote-situation-left">
				当前票数：{{voteData.totalVoteNum || 0}}票
			</view>
			<view class="vote-situation-right flex-box-space-between"
				@click="goToUrl('voteSituation', {tabsIndex,activityIdTap})">
				查看投票情况
				<image :src="imageUrl + '/vote-left-icon.png'"></image>
			</view>
		</view>
		<view class="situation-nav">
			<u-tabs :list="navList" itemStyle="height: 44px; flex: 1;" lineWidth="100rpx" lineColor="#3A64A5"
				activeStyle="color: #3A64A5; font-size:32rpx;font-weight: bold;"
				inactiveStyle="font-size: 32rpx; color: #333333;" @click="onTabs"></u-tabs>
		</view>
		<view class="situation-list">
			<view class="situation-item" v-for="(item, index) in dataList" :key="index">
				<view class="situation-item-title">
					<view class="situation-item-title-num">
						<view class="situation-item-title-num-text">{{item.orderNum || ''}}号</view>
					</view>
					<view class="situation-title">
						{{item.workName || ''}}
					</view>
				</view>
				<view class="situation-group flex-box-space-between">
					<view class="" style="flex: 1;">参赛队伍：{{item.partTeam || ''}}</view>
					<view class="group-vote" @click="voteSubmit(item.workId)">
						{{item.totalVoteNum || 0}}票&nbsp;&nbsp;为TA投票
					</view>
				</view>
				<view class="situation-content">
					<view v-if="item.imgs.length">
						<scroll-view :scroll-x="true" class="situation-image-box flex-box-center-y" :enhanced="true"
							:show-scrollbar="true">
							<image :src="imgItem" v-for="(imgItem, imgIndex) in item.imgs" :key="imgIndex" mode="widthFix"
								@click="preview(item.imgs,imgIndex)"></image>
						</scroll-view>
						<view class="tips-image" v-if="item.imgs.length > 1">
							左右滑动图片可查看更多
						</view>
					</view>
					<!-- <scroll-view :scroll-x="true" class="situation-gif-box" :enhanced="true" :show-scrollbar="true">
						<image :src="imgItem" v-for="(imgItem, imgIndex) in bannerList" :key="imgIndex"></image>
					</scroll-view> -->
					<view v-if="item.logoVideoUrl" class="situation-video-box">
						<video :id="item.workNo" @play="videoPlay(item.workNo)" :src="item.logoVideoUrl"></video>
					</view>
				</view>
				<view class="situation-desc">
					<text style="color: #333333; font-weight: bold;">作品简介：</text>
					<u-parse :content="item.workDesc"></u-parse>
				</view>
			</view>
			<!-- 没有内容展示 -->
			<view class="situation-available" v-if="total == 0">
				<image :src="imageUrl + '/currentlyUnavailable.png'" mode="widthFix"
					style="width:265rpx;height:301rpx;margin-top:158rpx;"></image>
			</view>
		</view>
		<u-popup :show="tipsShow" @close="tipsClose" mode="center" closeOnClickOverlay round="12rpx"
			:safeAreaInsetBottom='false'>
			<view class="tips-popup-box">
				<view class="tips-popup-title">
					{{tipsTitle}}
				</view>
				<view class="tips-popup-content">
					{{msg}}
				</view>
				<view class="tips-popup-btn" @click="tipsClose">
					好的
				</view>
			</view>
		</u-popup>
		<!-- <view class="tips-box">
			<view>本次大赛评分满分为100分</view>
			<view>网络投票评分占30%、初评分占70%的方式</view>
			评选出本次大赛的一、二、三等奖。
		</view> -->
		<!-- 赛事承办方信息 -->
		<view>
			<image :src="imageUrl + '/contractor-foot.png'" mode="widthFix"
				style="width: 680rpx;height: 429.18rpx;margin: 0px 14px 24px 14px;"></image>
		</view>

		<view class="version-box">
			当前版本：V1.3
		</view>
	</view>
</template>

<script>
	import {
		voteIndex,
		getWorkList,
		voteSubmit
	} from "@/api/vote/vote.js"
	import {
		wxLogin
	} from "@/api/public/index.js"
	export default {
		data() {
			return {
				bannerList: [
					// 'https://xnlv.lzxx8848.com/image/xnlv/static/shear-image.png'
					'https://xnlv.lizxx.com/image/xnlv/static/braanTU.png'
				],
				imageUrl: this.$imageUrl,
				navList: [{
					name: '数字文化',
					type: 'szwh'
				}, {
					name: '数字人居',
					type: 'szrj'
				}, {
					name: '数字工业',
					type: 'szgy'
				}, {
					name: '元宇宙',
					type: 'yyz'
				}],
				dataList: [],
				pageNum: 1,
				type: 'szwh',
				total: -1,
				voteData: {},
				tabsIndex: 0,
				show: true,
				voteId: '',
				activityIdTap: '',
				trailer: [],
				tipsShow: false,
				msg: '',
				tipsTitle: '',
				videoContext: null,
				videoId: ''
			}
		},
		onShareAppMessage() {
			return {
				title: '长沙学院第三届“月湖杯”3D大赛网络投票开始啦~',
				path: '/pages/home?isVote=vote',
				imageUrl: 'https://xnlv.lizxx.com/image/xnlv/static/sharin.png'
			}
		},
		onShareTimeline() {
			return {
				title: '长沙学院第三届“月湖杯”3D大赛网络投票开始啦~',
			};
		},
		onLoad() {
			this.voteIndex()
		},
		onShow() {},
		onHide() {
			this.dataList = []
			this.pageNum = 1
			this.voteIndex()
		},
		onReachBottom() {
			if (this.dataList.length >= this.total) return
			this.pageNum++
			this.getWorkList()
		},
		methods: {
			async voteIndex() {
				let res = await voteIndex()
				this.voteData = res.data || {}
				this.activityIdTap = res.data.activityId
				this.getWorkList()
			},
			async getWorkList() {
				let res = await getWorkList({
					workClassify: this.type,
					pageSize: 6,
					pageNum: this.pageNum,
					activityId: this.activityIdTap
				})
				this.dataList.push(...res.rows)
				this.total = res.total
			},
			async voteSubmit(id) {
				this.voteId = id
				if (wx.getLaunchOptionsSync().scene === 1154) {
					uni.showToast({
						title: '请前往小程序使用完整服务',
						icon: 'none',
						duration: 3000
					})
					return
				}
				if (!uni.getStorageSync('token')?.length) {
					this.getCode()
					return
				}
				let res = await voteSubmit(this.voteId)
				if (res?.code == 200) {
					this.goToUrl('voteSituation', {
						tabsIndex: this.tabsIndex,
						activityIdTap: this.activityIdTap,
						isSuccess: 'success',
						msg: res.msg
					})
				} else if (res?.code == 600) {
					this.tipsShow = true
					this.msg = res.msg
					this.tipsTitle = '提示'
				}
			},
			onTabs(e) {
				if (this.tabsIndex == e.index) return
				this.tabsIndex = e.index
				this.type = e.type
				this.pageNum = 1
				this.total = -1
				this.dataList = []
				this.trailer = []
				this.getWorkList()
			},
			// 获取code登录
			getCode() {
				uni.login({
					provider: 'weixin',
					success: res => {
						this.code = res.code
						this.wxLogin()
					},
					fail: err => {
						console.log(err)
					}
				})
			},
			// 登录请求
			async wxLogin() {
				let res = await wxLogin(this.code, this.$appID)
				uni.setStorageSync('token', res.data.token);
				uni.setStorageSync('wxUser', res.data.wxUser);
				uni.setStorageSync('openId', res.data.openId);
				this.voteSubmit(this.voteId)
			},
			goToUrl(urlName, params = {}) {
				this.$Router.push({
					name: urlName,
					params
				})
			},
			videoPlay(id) {
				let videoid = id;
				if (this.videoid != videoid && this.videoContext) {
					//关闭上一个播放的视频
					this.videoContext.stop();
				}
				this.videoid = videoid;
				//创建控制视频标签的实例对象
				this.videoContext = uni.createVideoContext(this.videoid, this);
			},
			tipsClose() {
				this.tipsShow = false
			},
			// 点击预览图片
			preview(imageUrl, index) {
				uni.previewImage({
					current: index, //当前为第几张
					urls: imageUrl,
					// indicator: 'number',
					// loop: true
				});
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .u-tabs__wrapper__nav__item {
		flex: 1 !important;
		padding: 0 !important;
	}

	.vote-view {
		background-color: #e8f1fe;
		min-height: 100vh;
	}

	.u-content {
		padding: 24rpx;
	}

	.vote-down-icon {
		width: 60rpx;
		height: 60rpx;
		margin-top: 24rpx;
		animation: zoom 1.5s infinite // transform: rotate(90deg);
	}

	@keyframes zoom {
		from {
			transform: translateY(-50%);
		}

		to {
			transform: translateY(0);
		}
	}

	.vote-situation-box {
		padding: 20rpx;
		background-color: #fff;
		margin: 20rpx 30rpx 10rpx;
		border-radius: 16rpx;

		.vote-situation-left {
			font-size: 30rpx;
			color: #333333;
		}

		.vote-situation-right {
			font-size: 30rpx;
			color: #3A64A5;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-left: 12rpx;
			}
		}
	}

	.situation-nav {
		padding-bottom: 20rpx;
	}

	.situation-list {
		padding: 18rpx;
		min-height: 80vh;
	}

	.situation-item {
		padding: 42rpx 32rpx 32rpx;
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 16rpx;

		.situation-item-title {
			display: flex;
			padding-bottom: 34rpx;
			border-bottom: 2rpx solid #EFEFEF;

			.situation-item-title-num {
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: rgba(245, 186, 15, 0.19);
				width: 94rpx;
				height: 44rpx;
				border-radius: 10%;
				text-align: center;
				margin-right: 20rpx;

				.situation-item-title-num-text {
					color: #F5BA0F;
					font-size: 28rpx;
					font-weight: bold;
				}
			}

			.situation-title {
				flex: 1;
				font-size: 32rpx;
				color: #3A64A5;
				font-weight: bold
			}
		}

		.situation-group {
			font-size: 24rpx;
			color: #666666;
			margin-top: 16rpx;
		}

		.group-vote {
			min-width: 190rpx;
			height: 68rpx;
			background: #E8F1FE;
			border-radius: 4rpx;
			text-align: center;
			line-height: 68rpx;
			font-size: 28rpx;
			color: #3A64A5;
			font-weight: bold;
			padding: 0 20rpx;
		}

		.situation-content {
			margin-top: 16rpx;

			.situation-image-box {
				width: 100%;
				white-space: nowrap;
				border-radius: 8rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
					padding: 0 20rpx 0 0;
				}
			}

			.situation-gif-box {
				width: 100%;
				height: 362rpx;
				white-space: nowrap;
				margin-top: 14rpx;
				border-radius: 8rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
				}
			}

			.situation-video-box {
				width: 100%;
				height: 362rpx;
				margin-top: 14rpx;
				border-radius: 8rpx;
				overflow: hidden;

				video {
					width: 100%;
					height: 362rpx;
					border-radius: 8rpx;
				}
			}
		}

		.situation-desc {
			margin-top: 22rpx;
			font-size: 28rpx;
			color: #666666;
			line-height: 2em;
		}
	}

	.tips-box {
		font-size: 28rpx;
		color: #333333;
		margin-top: 42rpx;
		padding-bottom: 200rpx;
		text-align: center;
		line-height: 2em;
	}

	.vote-content {
		font-size: 28rpx !important;
		padding: 0 28rpx;
	}

	.tips-image {
		font-size: 28rpx;
		color: #333333;
		text-align: center;
		margin-top: 4rpx;
	}

	.situation-available {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tips-popup-box {
		width: 664rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		box-sizing: border-box;
		padding-top: 72rpx;

		.tips-popup-title {
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			text-align: center;
		}

		.tips-popup-content {
			font-size: 30rpx;
			color: #999999;
			padding: 28rpx 46rpx 42rpx;
			border-bottom: 2rpx solid #F1F1F1;
			text-align: center;
		}

		.tips-popup-btn {
			text-align: center;
			line-height: 100rpx;
			width: 100%;
			height: 100rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #3A64A5;
		}
	}

	.version-box {
		padding: 20rpx 0 50rpx;
		text-align: center;
		font-size: 24rpx;
		color: #999999;
	}
</style>